<template>
    <div class="mains">
        <div class="login-contain">
            <div class="label">
                <el-form label-width="80px" style="margin-top:20px">
                    <el-input type="text" placeholder="请输入账号" class="input" autocomplete="new-pwd" v-model="name"></el-input>
                    <el-input type="password" placeholder="请输入密码" class="input" autocomplete="new-pwd"  v-model="password"></el-input>
                </el-form>
                <el-button class="btn" @click="login">登录</el-button>
            </div>
<!--          <div>{{msg}}</div>-->
        </div>

    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import cookies from 'js-cookie'
const instance = getCurrentInstance()
let name=ref('')
let password=ref('')
let sel_piece = null
let sel_row = null
let sel_col = null
let player = 'B'
let msg = ref(0)

const {commit} =useStore()
const router = useRouter()

function login() {
    if (!name.value || !password.value) {
        ElMessage.error('请填写相应的信息！')
        return
    }
    let val = {
        username:name.value,
        password:password.value,
    }
    instance.proxy.$http.post('/api/v2.0/user/login ', val).then((res) => {
        let error = res.error
        if (error == 0) {
            ElMessage.success('登录成功')
            cookies.set('userid', val.username)
            sessionStorage.setItem('tokenAddFun',res.token)
            sessionStorage.setItem('userAddId',val.username)
            commit('updateName',val.username)
            router.push({
                name: 'Home',
            })
        }else{

          ElMessage.error('error:' + error)

        }
    })
}


</script>

<style  scoped>
.mains {
    /*background-image: url('../assets/bac.jpg');*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
}
.login-contain{
      width: 578px;
      height: 350px;
      padding: 0px;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      align-self: center;
      /* background: #FFFFFF; */
      border-radius: 8px;
  }

.bord-col {
  float:left;
  height:30px;
  width:40px;
  display: flex; /* 设置容器为flex布局 */
  align-items: center; /* 水平居中对齐项目 */
  justify-content: center; /* 垂直居中对齐项目 */
  cursor: default;
}

.active-piece {
  text-decoration-line: underline;
}

.red-piece {
  color: red;
}

  .input{
      width: 350px;
      height: 50px;
      text-align: left;
      margin-top:10px;
  }
  .btn{
      margin-top: 50px;
      width: 350px;
      height: 50px;
      background-color: rgb(0, 150, 230);
      color: #fff;
      font-size: 20px;
  }
  .panel button {
    margin-left: 20px;
  }

  .chess-board {
    height:605px;
    width: 538px;
  }

  /deep/ .el-input__inner{
      background-color: rgba(255,255,255,0) !important;
    font-size: 30px;
  }
  /deep/ .el-input__inner:-webkit-autofill{
      transition: background-color 5000s ease-in-out 0s;
  }
  /deep/ .el-input__inner:-webkit-autofill:focus{
      -webkit-text-fill-color: #333 !important;
  }
</style>
